<template>
  <inline-Modal
    :visible="visible"
    title="查看"
    :showOk="false"
    @cancel="handelCancel()"
  >
    <div class="allocation-detail-container">
      <div class="present-status">
        <div class="name">当前状态：</div>
        <div :class="[checkStatusClass(resultData), 'flow']">
          {{ checkStatusName(resultData) }}
        </div>
      </div>
      <div class="examine-container">
        <div class="title">考核信息</div>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="五级指标">
              <a-input
                disabled
                v-model="basicInfo.assessmentContent"
                type="textarea"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="判定标准">
              <a-input
                disabled
                v-model="basicInfo.determine"
                type="textarea"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="责任主体">
              <a-input disabled v-model="resultData.orgCodeName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="自评分">
              <a-input disabled v-model="resultData.ownScore"></a-input>
              <span class="unit">分</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="考核开始时间">
              <a-input disabled v-model="expert.startTime"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="考核结束时间">
              <a-input disabled v-model="expert.endTime"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="考核专家">
              <a-input disabled :value="expert.zjName"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="专家评分">
              <a-input disabled v-model="resultData.finalScore"></a-input>
              <span class="unit">分</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="评分时间">
              <a-input disabled v-model="resultData.updateTime"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="专家意见">
              <a-input
                disabled
                :rows="4"
                type="textarea"
                v-model="resultData.finalRemark"
              ></a-input>
            </a-form-model-item>
          </a-col>
        </a-row>
      </div>
      <div class="review-materials">
        <div class="title">审查资料</div>
        <div class="review-table-container">
          <vxe-table
            ref="xTable"
            height="99%"
            align="center"
            border="inner"
            size="small"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
          >
            <vxe-column field="orgName" title="责任主体"> </vxe-column>
            <vxe-column field="fileName" title="资料名称"> </vxe-column>
            <vxe-column field="userName" title="上传人"> </vxe-column>
            <vxe-column field="createTime" title="上传时间"> </vxe-column>
            <vxe-column
              field="operate"
              width="120"
              title="操作"
              fixed="right"
              align="left"
            >
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="viewFile(row)"> 预览 </a-button>
                  <a-button type="link" @click="downloadFile(row)">
                    下载
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
    </div>
    <!-- 附件预览弹窗 -->
    <previewModal
      :visible.sync="previewVisible"
      :loading="previewLoading"
      ref="previewModal"
    ></previewModal>
  </inline-Modal>
</template>

<script>
import { mapGetters } from "vuex";
import { axios } from "@/utils/request";
import { getToken } from "@/utils/TopVUI";
import { downloadDfs } from "@/utils/TopVUI";
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loading: false,
      tableData: [],
      resultData: {},
      basicInfo: {},
      expert: {},
      previewVisible: false,
      previewLoading: false,
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getExpertData();
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  methods: {
    //附件预览
    viewFile(file) {
      let { url } = file;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewVisible = true;
    },

    //附件下载
    downloadFile(file) {
      let { url } = file;
      if (!url) {
        this.$message.success("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    //查询专家信息
    getExpertData() {
      return new Promise((resolve, reject) => {
        let { id, tenantCode } = this.soucre;
        axios
          .get(
            `/probusiness/qeStatistics/getExpertData?id=${id}&tenantCode=${tenantCode}`,
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.expert = res?.data || {};
            if (!this.expert?.zjName) {
              return;
            }
            this.expert.zjName = this.expert?.zjName.toString() || "";
            resolve();
          })
          .catch((_) => {
            this.expert = {};
            reject();
          });
      });
    },

    //查询详情
    getDetail() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { orgCode, taskId, id, tenantCode } = this.soucre;
        axios
          .post(
            `/probusiness/qeTaskAllocation/getContentViewDetailList`,
            {
              orgCode,
              taskId,
              id,
              tenantCode,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.resultData = res.data;
            this.basicInfo = res.data?.qeEvaluationContent || {};
            this.tableData = res.data?.configFiles || [];
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.resultData = {};
            this.basicInfo = {};
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //校验状态名称
    checkStatusName(row) {
      let { status } = row;
      switch (status) {
        case 0:
          return "待上传";

        case 1:
          return "已上传";

        case 2:
          return "待审批";

        case 3:
          return "已驳回";

        case 4:
          return "已完成";

        case 5:
          return "已通过";

        default:
          return "--";
      }
    },

    //校验状态className
    checkStatusClass(row) {
      let { status } = row;
      switch (status) {
        case 0:
          return "cancel";

        case 1:
          return "warn";

        case 2:
          return "lock";

        case 3:
          return "error";

        case 4:
          return "pass";

        case 5:
          return "normal";

        default:
          return "cancel";
      }
    },

    handelOk() {
      this.$emit("ok");
    },

    handelCancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
.allocation-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  .present-status {
    position: absolute;
    top: 14px;
    left: 140px;
    display: flex;
    align-items: center;
    .name {
      font-size: 14px;
      color: #999999;
    }
    .flow {
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      padding: 0 8px;
      text-align: center;
      height: 26px;
      line-height: 26px;
      &.normal {
        background: #4bc964;
      }
      &.warn {
        background: #ff993f;
      }

      &.error {
        background: #ff3f4a;
      }

      &.lock {
        background: #0098ff;
      }

      &.pass {
        background: #48c7cd;
      }

      &.cancel {
        background: #f1f2f7;
        color: #aab0bc;
      }
    }
  }

  .title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #525a5d;
    padding-left: 20px;
    margin: 0px 0 10px 0;
  }
  .examine-container {
    flex-shrink: 0;
    border-bottom: 1px solid @border-color;
    /deep/.ant-form-item {
      margin-bottom: 10px;
      display: flex;
      .ant-form-item-label {
        width: 140px;
        flex-shrink: 0;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
        textarea {
          height: 80px;
        }
        .ant-calendar-picker {
          width: 100%;
        }
      }
    }
    .unit {
      position: absolute;
      top: -12px;
      right: -22px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333333;
    }
  }
  .review-materials {
    padding-top: 10px;
    flex-shrink: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    .review-table-container {
      flex: 1;
      height: 100%;
    }
  }
}
</style>
